<script lang="ts" setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import router from "@/router";

//是否登录
const isLogin = ref(false)
//是否显示登录对话框
const isShowLogin = ref(false)
const autoplay = ref(true) // 循环播放
//检查是否登录
const checkLogin = () => {
  isLogin.value = true
}

const slide = ref(1)//首页banner索引

onMounted(() => {
  checkLogin()
})
</script>

<template>
  <div class="index-main">
    <div class="navbar-title cursor-pointer">
      “科技赋能微笑，让每一次看牙都安心又智能！”
    </div>
    <div class="q-pa-md">
      <q-carousel
          v-model="slide"
          :autoplay="autoplay"
          animated
          arrows
          infinite
          navigation
          style="height: 50vh"
          transition-next="slide-left"
          transition-prev="slide-right"
          @mouseenter="autoplay = false"
          @mouseleave="autoplay = true"
      >
        <q-carousel-slide :name="1" img-src="/imgs/环境.jpg"/>
<!--        <q-carousel-slide :name="2" img-src="/imgs/牙齿1.jpg"/>-->
<!--        <q-carousel-slide :name="3" img-src="/imgs/牙齿2.jpg"/>-->
      </q-carousel>
    </div>

    <div class="d-flex align-item-center justify-content-center flex-column mt-3">
      <h3>牙医信息在线平台</h3>
      <div class="body-title d-flex align-item-center justify-content-center mt-2 text-center">
        “预约、病例、诊疗、回访一体化，牙科诊所管理从未如此简单。”
      </div>
    </div>
    <div style="margin: 20px">
      <h4 style="margin-bottom: 30px;">金牌牙医</h4>
      <div style="display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between">
        <div style="width: 20vw;display: flex;flex-direction: column;align-items: center;min-width: 300px">
          <image src="/imgs/doctor-1.jpg" style="width: 16vw;min-width: 300px"></image>
          <div style="font-size: 20px">张三</div>
        </div>
        <div style="width: 20vw;display: flex;flex-direction: column;align-items: center;min-width: 300px">
          <image src="/imgs/doctor-2.jpg" style="width: 16vw;min-width: 300px"></image>
          <div style="font-size: 20px;">李四</div>
        </div>
        <div style="width: 20vw;display: flex;flex-direction: column;align-items: center;min-width: 300px">
          <image src="/imgs/doctor-3.jpg" style="width: 16vw;min-width: 300px"></image>
          <div style="font-size: 20px">王五</div>
        </div>
        <div style="width: 20vw;display: flex;flex-direction: column;align-items: center;min-width: 300px">
          <image src="/imgs/doctor-4.jpg" style="width: 16vw;min-width: 300px"></image>
          <div style="font-size: 20px">赵六</div>
        </div>
      </div>
    </div>

    <div class="middle-box">
      <div class="left-box">
        <div class="text-h3">我们提供最优质的服务</div>
      </div>
      <q-img
          src="/imgs/刷牙.jpg"
          style="max-width:30vw;height: 80vh"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.index-main {
  background-color: #f8f6f3;
  width: 100vw;
  padding-bottom: 5vh;

  .parallax {
    width: 100vw;
  }

  .navbar-title {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #008f8b;
  }

  .num-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
    margin: 30px;
  }

  .body-title {
    font-size: 16px;
    width: 70vw;
  }

  .middle-box {
    height: 100vh;
    width: 90vw;
    margin-left: 5vw;
    margin-right: 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left-box {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: center;
    }
  }
}


</style>
